<template>
  <common-edit-dialog
    :title="title"
    :visible.sync="open"
    @cancel="cancel"
    @submit="submitForm"
    :buttonLoading="buttonLoading"
  >
    <el-form
      :model="form"
      label-width="80px"
      ref="form"
      :rules="rules"
      @submit.native.prevent
    >
      <el-row :gutter="18">
        <el-col :span="12">
          <el-form-item label="应用名称" prop="applicationName">
            <common-input
              v-model="form.applicationName"
              :maxlength="32"
              :verify="false"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="域名" prop="domain">
            <common-input
              v-model="form.domain"
              :verify="false"
              placeholder="请输入"
              @input="inputValue"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="IP地址" prop="ip">
            <common-input
              v-model="form.ip"
              :verify="false"
              placeholder="请输入"
              @input="inputValue"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="端口" prop="port" class="application-port">
            <common-input-number
              style="width: 100%"
              :max-length="5"
              v-model="form.port"
              clearable
              placeholder="请输入"
              @input="inputPort"
            ></common-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="业务系统" prop="businessSystemId">
            <el-select
              v-model="form.businessSystemId"
              filterable
              clearable
              class="custom-select"
            >
              <el-option
                class="custom-select"
                v-for="item in businessList"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
                <span class="selectList">
                  <common-marquee-text :content="item.dictLabel">
                  </common-marquee-text>
                </span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <common-input
              v-model="form.remark"
              type="textarea"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </common-edit-dialog>
</template>

<script>
import { validateIPOrNull, validateDomainOrNull } from "@/utils/formValidates";
import { add, edit, getInfo } from "@/api/system/application/application";

export default {
  name: "add",
  props: {
    businessList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      title: "",
      open: false,
      buttonLoading: false,
      form: {
        id: null,
        applicationName: "",
        domain: "",
        ip: "",
        port: null,
        businessSystemId: "",
        remark: "",
      },
      rules: {
        applicationName: [
          { required: true, message: "请输入应用名称", trigger: "blur" },
        ],
        businessSystemId: [
          { required: true, message: "请选择业务系统", trigger: "change" },
        ],
        domain: [
          {
            required: false,
            message: "请输入域名",
            trigger: "blur",
          },
          {
            required: false,
            message: "域名格式错误",
            validator: validateDomainOrNull,
            trigger: "blur",
          },
        ],
        ip: [
          {
            required: false,
            message: "请输入IP地址",
            trigger: "blur",
          },
          {
            required: false,
            message: "IP格式错误，支持IPV4/IPV6格式",
            validator: validateIPOrNull,
            trigger: "blur",
          },
        ],
        port: [
          {
            required: false,
            min: 1,
            max: 65535,
            type: "number",
            message: "端口号范围1~65535",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    inputValue() {
      if (this.form.ip && this.form.domain) {
        this.rules["ip"][0].required = true;
        this.rules["ip"][1].required = true;

        this.rules["domain"][0].required = true;
        this.rules["domain"][1].required = true;
      } else if (this.form.ip) {
        this.rules["ip"][0].required = true;
        this.rules["ip"][1].required = true;

        this.rules["domain"][0].required = false;
        this.rules["domain"][1].required = false;
        this.$refs.form.clearValidate(["domain"]);
      } else if (this.form.domain) {
        this.rules["ip"][0].required = false;
        this.rules["ip"][1].required = false;
        this.rules["domain"][0].required = true;
        this.rules["domain"][1].required = true;
        this.$refs.form.clearValidate(["ip"]);
      }
    },

    cancel() {
      this.resetForm();
      this.open = false;
    },
    resetForm() {
      this.$refs.form.resetFields();
      this.form.id = null;
    },
    inputPort() {
      if (this.form.port) {
        this.rules["port"][0].required = true;
      } else {
        this.rules["port"][0].required = false;
      }
    },
    showDialog(id) {
      if (id) {
        this.title = "编辑应用管理";
        getInfo({ id }).then((res) => {
          if (res && res.code === 200) {
            this.open = true;
            this.$nextTick(() => {
              Reflect.ownKeys(this.form).forEach(
                (k) => (this.form[k] = res.data[k])
              );
              this.form.businessSystemId =
                this.form.businessSystemId.toString();
              this.form.port = this.form.port === 0 ? "" : this.form.port;
              this.inputValue();
            });
          } else {
            this.$GlobalErrorConfirm("数据加载失败", res.msg);
          }
        });
      } else {
        this.title = "新增应用管理";
        this.open = true;
        this.rules["ip"][0].required = true;
        this.rules["ip"][1].required = true;

        this.rules["domain"][0].required = true;
        this.rules["domain"][1].required = true;
      }
    },
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.buttonLoading = true;
          if (this.form.port === "") this.form.port = null;
          if (this.form.id != null) {
            edit(this.form)
              .then((res) => {
                if (res && res.code === 200) {
                  this.$GlobalSuccessMessage("编辑成功");
                  this.cancel();
                  this.$emit("refresh");
                } else {
                  this.$GlobalErrorConfirm("编辑失败", res.msg);
                }
              })
              .finally(() => {
                this.buttonLoading = false;
              });
          } else {
            add(this.form)
              .then((res) => {
                if (res && res.code === 200) {
                  this.$GlobalSuccessMessage("新增成功");
                  this.cancel();
                  this.$emit("refresh");
                } else {
                  this.$GlobalErrorConfirm("新增失败", res.msg);
                }
              })
              .finally(() => {
                this.buttonLoading = false;
              });
          }
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.application-port {
  ::v-deep .el-form-item__label:before {
    display: none !important;
  }
}
</style>
